<template>
  <div class="myContainer">
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="first">
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                任务名称 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务名称" v-model="datas.task_no" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                任务状态 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务状态" v-model="mainstatus" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                隶属计划 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="隶属计划" v-model="datas.plan_title" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                考核小区 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="考核小区" v-model="datas.area_name" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                考核类型 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="考核类型" v-model="datas.type_name" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                考核得分 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="考核得分" v-model="datas.type_score" :readonly="readonly"></el-input>
              </el-col>
            </el-row> 
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                负责人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务负责人" v-model="datas.charger_name" :readonly="readonly"></el-input>
              </el-col>
              <!-- <el-col :span="3" class="myLeftMsg">
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话" v-model="datas.charger_phone" :readonly="readonly"></el-input>
              </el-col> -->
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                处理人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="处理人"  v-model="datas.dealer_name" :readonly="readonly"></el-input>
              </el-col>
              <!-- <el-col :span="3" class="myLeftMsg">
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话" v-model="datas.dealer_phone" :readonly="readonly"></el-input>
              </el-col> -->
            </el-row> 
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                监察人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="监察人"  v-model="datas.supervisor_name" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                开始时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="开始时间" v-model="datas.gen_time" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                截止时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="截止时间" v-model="datas.end_time" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <!-- <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                提交时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="提交时间" v-model="datas.commit_time" :readonly="readonly"></el-input>
              </el-col>
            </el-row> -->
            <el-row class="myPaddingBottom_10px">
              <el-col :span="6" :offset="3">
                <el-button @click="onBack">关 闭</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="考核标准" name="second">
            <el-row :gutter="10">
              <el-col :span="4">
                <template>
                  <el-select v-model="standardSelected"
                    clearable
                    placeholder="全部执行状态">
                    <el-option
                      v-for="item in standard"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-col>
              <el-col :span="4">
                <template>
                  <el-select v-model="resultSelected"
                    clearable
                    placeholder="全部考核结果">
                    <el-option
                      v-for="item in result"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-col>
              <el-col :span="4">
                <el-input placeholder="请输入关键词" v-model="kw"></el-input>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="search">查询</el-button>
              </el-col>
            </el-row>
            <el-row class="myPaddingTop_10px">
              <el-col :span="24">
                <template>
                  <el-table
                    border
                    :data="list"
                    :stripe = true
                    v-loading="loading"
                    style="width: 100%">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-table
                          border
                          stripe
                          :data="props.row.detail_list"
                          style="width: 100%">
                          <el-table-column
                            type="index"
                            label="序号"
                            width="55">
                          </el-table-column>
                          <el-table-column
                            label="考核地址"
                            prop="detail_address" >
                          </el-table-column>
                          <el-table-column
                            label="考核结论"
                            prop="detail_result" >
                            <template scope="scope">
                              <span v-if="scope.row.detail_result==0">合格</span>
                              <span v-if="scope.row.detail_result==1">不合格</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="处理人"
                            prop="dealer_name" >
                          </el-table-column>
                          <el-table-column
                            label="处理时间"
                            prop="commit_time" >
                          </el-table-column>
                          <el-table-column
                            label="功能操作"
                            width="100">
                            <template scope="scope">
                              <el-button class="look" type="text" size="small" @click="detailinfo(scope.row.detail_id,props.row.detail_result)">详情</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="序号"
                      type="index"
                      width="55">
                    </el-table-column> 
                    <el-table-column
                      label="考核标准代码"
                      prop="st_no">
                    </el-table-column>
                    <el-table-column
                      label="考核内容"
                      prop="st_content">
                    </el-table-column>
                    <el-table-column
                      label="考核标准"
                      prop="st_info">
                    </el-table-column>
                    <!-- <el-table-column
                      label="重点考核"
                      prop="detail_focus">
                    </el-table-column> -->
                    <el-table-column
                      label="必检"
                      prop="is_necessary"
                      width="100">
                      <template scope="scope">
                        <span v-if="scope.row.is_necessary==1">是</span>
                        <span v-else>否</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="执行状态"
                      prop="status"
                      width="120">
                      <template scope="scope">
                        <span v-if="scope.row.status==1">已执行</span>
                        <span v-else>未执行</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="考核结论"
                      prop="detail_result"
                      width="120">
                      <template scope="scope">
                        <span v-if="scope.row.detail_result==1 && scope.row.status==1">不合格</span>
                        <span v-else-if="scope.row.detail_result==0 && scope.row.status==1">合格</span>
                        <span v-else>-</span>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column
                      label="功能操作"
                      width="120">
                      <template scope="scope">
                        <el-button class="look" type="text" size="small" @click="toDetailed(scope.row.detail_id)">详情</el-button> |
                        <el-button class="look" type="text" size="small" @click="openDetailed(scope.row.detail_id)">整改任务</el-button>
                      </template>
                    </el-table-column> -->
                  </el-table>
                </template>
              </el-col>
            </el-row>
            <!-- <div class="block">                    
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page_num"
                :page-sizes="[10, 15]"
                :page-size="page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div> -->
            <el-row class="myPaddingTop_10px">
              <el-col :span="6">
                <el-button @click="onBack">关 闭</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row> 

    <!-- 整改任务列表 start -->
    <el-dialog title="整改任务" :visible.sync="taskDig">
      <el-row>
        <template>
          <el-table
            border
            :data="rectifylist"
            :stripe = true
            v-loading="loading"
            style="width: 100%"> 
            <el-table-column
              label="任务单号"
              prop="rectify_no">
            </el-table-column>
            <el-table-column
              label="生成时间"
              prop="gen_time">
            </el-table-column>
            <el-table-column
              label="当前状态"
              prop="cate_name">
              <template scope="scope">
                {{scope.row.status | status}}
              </template>
            </el-table-column>
            <el-table-column
              label="是否逾期"
              prop="is_overdue">
              <template scope="scope">
                <span v-if="scope.row.is_overdue==1">未逾期</span>
                <span v-else>逾期</span>
              </template>
            </el-table-column>
            <el-table-column
              label="处理人"
              prop="dealer_name">
            </el-table-column>
            <el-table-column
              label="提交时间"
              prop="commit_time">
            </el-table-column>
            <el-table-column
              label="截止时间"
              prop="end_time">
            </el-table-column>
            <el-table-column
              label="功能操作">
              <template scope="scope">
                <el-button class="look" type="text" size="small" @click="toReDetailed(scope.row.rectify_id)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="taskDig = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 整改任务列表 end -->

    <el-dialog title="详情" width='60%' :visible.sync="typeDialog">
      <el-row>
        <el-col :span="6" class="myLeftMsg">
          考核结论:
        </el-col>
        <el-col :span="18">
          <el-input placeholder="考核结论" v-model="detail.detail_result" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <!-- <el-row class="myPaddingTop_10px">
        <el-col :span="6" class="myLeftMsg">
          扣分值:
        </el-col>
        <el-col :span="18">
          <template>
            <el-select v-model="detail.score"
              clearable
              :disabled="readonly"
              placeholder="扣分值">
              <el-option :key="0" :label="0" :value="0"></el-option>
              <el-option
                v-for="i in 20"
                :key="i/2"
                :label="i/2"
                :value="i/2">
              </el-option>
            </el-select>
          </template>
        </el-col>
      </el-row> -->
      <el-row class="myPaddingTop_10px" v-if="itemresult==0">
        <el-col :span="6" class="myLeftMsg">
          整改天数:
        </el-col>
        <el-col :span="18">
          <el-input placeholder="整改天数" v-model="detail.rectify_days" :readonly="readonly"></el-input>
        </el-col>
      </el-row>
      <!-- <el-row class="myPaddingTop_10px" v-if="itemresult==0">
        <el-col :span="6" class="myLeftMsg">
          不合格标签:
        </el-col>
        <el-col :span="18" style="line-height: 40px">
          <el-checkbox-group v-model="st_tag" size="mini" :disabled="readonly">
            <el-checkbox-button v-for="label in labelOption" :label="label" :key="label">{{label}}</el-checkbox-button>
          </el-checkbox-group>
        </el-col>
      </el-row> -->
      <el-row class="myPaddingTop_10px">
        <el-col :span="6" class="myLeftMsg">
          现场图片:
        </el-col>
        <el-col :span="18">
          <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :before-upload="beforeAvatarUpload"
            :on-exceed="handleExceed"
            :data="postData"
            :limit="3"
            :file-list="fileList"
            :disabled="readonly"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <!-- <img :src="i" alt="" v-for="i in detail.detail_img.split(',')" width="50"/> -->
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <el-col :span="6" class="myLeftMsg">
          文字说明:
        </el-col>
        <el-col :span="18">
          <el-input placeholder="考核结论" type="textarea" v-model="detail.detail_info" :readonly="readonly"></el-input>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <el-col :span="6" class="myLeftMsg">
          考核地址:
        </el-col>
        <el-col :span="18">
          <el-input placeholder="考核地址" type="textarea" v-model="detail.detail_address" :readonly="readonly"></el-input>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="typeDialog = false">取 消</el-button>
      </div>
    </el-dialog>

  </div> 
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myDialogSearchText{
    width: 360px;
  }  
  .myPaddingTop_10px{
    padding-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }   
</style>

<script>
  import { infoMainTask , getDetailTaskListV2 , getRectifyDetailTaskList } from '@/api/quality'; 
  import { getQNToken } from '@/api/contentMGT';
  import { QINIU_API , QINIU_UP_API } from '@/config/baseUrl';
  export default {
    data(){
      return{
        title:"任务详细",
        tableData:[], 
        list:[],
        page_num:1,
        page_size:10,
        total:null,
        loading:false,
        readonly:true, 
        standardSelected:"",
        standard:[
          {label:"已执行",value:"1"},
          {label:"未执行",value:"0"}
        ],
        resultSelected:"",
        result:[
          {label:"合格",value:"0"},
          {label:"不合格",value:"1"}
        ],
        kw:"",
        id:"",
        type:"",
        flag:"",
        activeName:"first",
        taskDig:false,
        datas:{},
        mainstatus:"",
        rectifylist:[],
        typeDialog:false,
        itemresult:'',
        detail:[],
        uploadUrl:QINIU_UP_API,
        QINIU_API:QINIU_API,
        thumbnailUrl:[],
        fileList:[],
        labelOption:['管理工具运用','制度严格执行','流程标准规范','工作效率','培训反馈'],
        st_tag:[],
        dialogImageUrl: '',
        dialogVisible: false,
        postData:{
          token:""
        },
      }
    },
    components: {
        
    },
    filters:{
      status(val){
        let type={
          "1":"待整改", 
          "2":"待审核",
          "3":"已完成",
        }
        return type[val];
      }
    },
    created(){
      this.id = this.$route.query.id;
      this.type=this.$route.query.type;
      this.flag=this.$route.query.flag;
      this.activeName=this.flag || "first";
      if(this.activeName=="second"){
        this.ongetDetailTaskList(); 
      }
      if(this.type=="info"){
        this.oninfoMainTask(); 
      }

      this.onGetToken();
    },
    mounted(){
      document.title = this.title;
    }, 
    methods:{   
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
        this.ongetDetailTaskList();
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
        this.ongetDetailTaskList();
      },  
      search(){
        this.ongetDetailTaskList();
      },
      onBack(){
        this.$router.go(-1);
        // this.$router.push({
        //   path:"supervisoryTask"
        // })
      },
      toDetailed(id){
        this.$router.push({
          path:"supervisoryTaskDtailed",
          query:{
            type:"info",
            taskid:this.id,
            id:id 
          }
        })
      },
      openDetailed(id){
        let vm=this; 
        vm.ongetRectifyDetailTaskList(id);
      },
      toReDetailed(id){
        this.$router.push({
          path:"supervisorySubtaskComonents",
          query:{
            flag:"back",
            id:id,
            taskid:this.id,
            type:"info" 
          }
        })
      },
      oninfoMainTask(){
        let vm=this;
        infoMainTask(vm.id).then(response => {
          let res=response.data;
          vm.datas=res;
          vm.mainstatus=vm.mainTask(res.status);
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      mainTask(val){
        let type={
          "1":"待处理",
          "2":"处理中",
          "3":"整改中",
          "4":"已完成",
          "5":"逾期",
        }
        return type[val];
      },
      ongetDetailTaskList(){
        let vm=this;
        let params={ 
          // type_id:vm.majorSelected,
          status:vm.standardSelected,
          keyword:vm.kw,
          result:vm.resultSelected, 
          // page_num:vm.page_num,
          // page_size:vm.page_size
        }
        vm.loading=true;
        getDetailTaskListV2(params,vm.id).then(response => {
          let res=response.data;
          vm.list=res;
          // vm.page_size=res.page_size;
          // vm.page_num=res.page_num;
          // vm.total=res.total;
          vm.loading=false;
        }).catch(error => {
          vm.loading=false;
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      handleClick(tab, event) {
        let vm=this; 
        if(tab.name=="second"){
          vm.ongetDetailTaskList();
        }
      },
      ongetRectifyDetailTaskList(id){
        let vm=this;
        getRectifyDetailTaskList(id).then(response => {
          let res=response.data;
          vm.rectifylist=res;
          vm.taskDig=true;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      detailinfo(id,itemresult){
        this.detail_id=id;
        this.itemresult=itemresult;
        //type=='update'?this.readonly=false:this.readonly=true;
        this.oninfoDetailMainTask(id);
      },
      oninfoDetailMainTask(id){
        let vm=this;
        infoDetailMainTask(id).then(response =>{
          let res=response.data;
          vm.detail=res;
          if(res.st_tag){
            vm.st_tag=res.st_tag.split(',');
          }else{
            vm.st_tag=[];
          }
          vm.fileList=[];
          vm.thumbnailUrl=[];
          if(res.detail_img){
            let imgs=res.detail_img.split(',');
            for(let i=0; i<imgs.length; i++){
              vm.fileList.push({
                url:QINIU_API+imgs[i]
              })
              vm.thumbnailUrl.push(imgs[i])
            }
          }
          vm.typeDialog=true;
        }).catch(error =>{
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
      onGetToken(){//拉取七牛token
        let vm=this;
        getQNToken().then(response => {
          let res=response.data.up_token;
          vm.postData.token=res;
        }).catch(error => {
        })
      },
      handleExceed(file, fileList){
        this.$message.info("最多3张!");
      },
      handleAvatarSuccess(res, file, filelist) {
        this.thumbnailUrl=[];
        // filelist.length>3?this.isdisplay=true:this.isdisplay=false;
        for(let i=0; i<filelist.length; i++){
          if(filelist[i].response){
            this.thumbnailUrl.push(filelist[i].response.key)
          }else{
            this.thumbnailUrl.push(filelist[i].url)
          }          
        }
      },
      handleRemove(file, filelist) {
        this.thumbnailUrl=[];
        for(let i=0; i<filelist.length; i++){
          if(filelist[i].response){
            this.thumbnailUrl.push(filelist[i].response.key)
          }else{
            this.thumbnailUrl.push(filelist[i].url)
          }          
        }
      },

    }
    
  }   


</script>



